<script setup lang="ts">
import { NCard, NFlex, NImage, NScrollbar } from "naive-ui";
import { ref } from "vue";
import data from "../examples";
import type { IExample } from "../examples/types";
const dataRef = ref<IExample[]>(data);
</script>
<template>
  <NScrollbar x-scrollable style="width: 100%">
    <NFlex style="flex-direction: row; flex-wrap: nowrap">
      <NCard
        :title="item.name"
        size="small"
        v-for="item in dataRef"
        :key="item.key"
        style="width: 238px; padding: 4px; flex-direction: column-reverse"
      >
        <template #cover>
          <NImage
            style="height: 128px; width: 228px"
            :src="item.img"
            preview-disabled
          ></NImage>
        </template>
      </NCard>
    </NFlex>
  </NScrollbar>
</template>
<style scoped lang="scss">
:deep(.n-card-header) {
  padding: 2px 0px;
}
:deep(.n-card-cover) {
  display: flex;
  justify-content: center;
}
</style>
